<template>
  <div class="myNavbar">
    <uni-nav-bar dark shadow :fixed="true" :background-color="bgColor" :left-icon="isBack && 'left'" :left-text="isBack && ''"
      :title="title || navTitle" @clickLeft="leftClick">
      <template v-slot:right v-if="isRight">
        <view>
          <uni-icons class="icon_css" v-if="isSearch" @click="clickRight('search')" type="search" color="#fff"
            size="20" />
          <uni-icons class="icon_css" v-if="isStar" @click="clickRight('star')" type="star" color="#fff" size="20" />
          <uni-icons class="icon_css" v-if="isAdd" @click="clickRight('add')" type="plusempty" color="#fff" size="20" />
          <uni-icons class="icon_css" v-if="isNotice" @click="clickRight('notice')" type="notification-filled"
            color="#fff" size="20" />
          <uni-icons class="icon_css" v-if="isShare" @click="clickRight('share')" fontFamily="iconfont" color="#fff"
            :size="16">{{
              '&#xea1b;' }}</uni-icons>
        </view>
      </template>
      <view v-if="!isShowSearch" class="nav-bar-title" :style="titleStyle">
        <uni-notice-bar background-color="transparent" color="#fff" :speed="50" :scrollable="scrollable"
          :text="title || navTitle" single />
      </view>
      <view class="input-view" v-else>
        <uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
        <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm" />
      </view>
    </uni-nav-bar>
  </div>
</template>

<script lang="ts" setup>
import { ref, toRefs, computed } from 'vue';
import type { StyleValue } from 'vue'
interface IProps {
  isBack?: boolean
  title?: string
  bgColor?: string
  titleStyle?: StyleValue
  isSearch?: boolean
  isRight?: boolean
  isShare?: boolean
  isStar?: boolean
  isAdd?: boolean
  isNotice?: boolean
}
interface IEmits {
  // 带 payload 的事件
  (e: 'clickRight', icon: string): void
}
const pages = getCurrentPages()
const page = pages[pages.length - 1]
const navTitle = (page as any)?.$page?.meta?.navigationBar?.titleText || ''

const scrollable = computed(() => {
  if (title.value) {
    return title.value.length > 12
  } else {
    return navTitle.length > 12
  }
})


const props = withDefaults(defineProps<IProps>(), {
  isBack: false,
  bgColor: '#007AFF',
  isRight: false,
  isSearch: false,
  title: '',
  isShare: false,
  isStar: false,
  isAdd: false,
  isNotice: false,
})

const { bgColor, isBack, isRight, isSearch, title, titleStyle } = toRefs(props)

const emit = defineEmits<IEmits>()

function leftClick() {
  if (!isBack.value) return false
  console.log(isBack.value);
  if (pages.length < 2) {
    uni.reLaunch({ url: "/pages/index/index" });
  } else {
    uni.navigateBack({ delta: 1 });
  }

}

function confirm() {

}

const isShowSearch = ref(false);

function clickRight(str: string) {
  if (str === 'search') {
    isShowSearch.value = !isShowSearch.value
  }
  emit('clickRight', str)
}

</script>

<style lang="scss" scoped>
$nav-height: 30px;

.myNavbar {

  :deep(.uni-noticebar) {
    padding: 0;
    margin: 0;

    .uni-noticebar__content-text {
      font-size: 16px !important;
    }
  }

  :deep(.uni-navbar--border){
    border-bottom: 0;
  }


  .nav-bar-title {
    color: #fff;
    font-size: 16px;
    line-height: 44px;
    flex: 1;
    margin: 0 10px;
    display: flex;
    align-items: center;
    text-align: center;
  }

  .input-view {
    /* #ifndef APP-PLUS-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    // width: 500rpx;
    flex: 1;
    background-color: #f8f8f8;
    height: $nav-height;
    border-radius: 15px;
    padding: 0 15px;
    flex-wrap: nowrap;
    margin: 7px 0;
    line-height: $nav-height;
  }

  .input-uni-icon {
    line-height: $nav-height;
  }

  .nav-bar-input {
    height: $nav-height;
    line-height: $nav-height;
    /* #ifdef APP-PLUS-NVUE */
    width: 370rpx;
    /* #endif */
    padding: 0 5px;
    font-size: 12px;
    background-color: #f8f8f8;
    color: #000;
  }

  .icon_css {
    margin: 0 4px;
  }
}
</style>